<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>setTimeout</title>
    <style type="text/css">
        .first { 
            border: 1px solid blue ;
            width: 60%;
            margin: 15px auto ;
            padding: 10px ;
        }
    </style>
</head>

<body>

    <div class="first"></div>

    <script type="text/javascript">
        let count = 0 ;
        let timer ;
        let timeout = 1000;
        let handler = ()=>{
            // 选择页面上的元素
            let f = document.querySelector('.first');
            // 创建一个Date实例
            let d = new Date();
            // 获得 Date实例 的 字符串 形式 并将其设置到HTML元素中
            f.innerHTML = d.toLocaleTimeString() ;
            if( count < 10 ) {
                // 函数 handler 执行结束时，再次启用一个延迟执行的任务
                timer = setTimeout( handler , timeout );
            }
            count++
        }
        // 让 handler 在 timeout 毫秒延迟后再执行
        timer = setTimeout(handler, timeout);
        console.log(timer);
    </script>

</body>

</html>